<template lang="html">
  <sui-statistics-group>
    <sui-statistic in-group color="red">
      <sui-statistic-value>
        27
      </sui-statistic-value>
      <sui-statistic-label>
        Red
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="orange">
      <sui-statistic-value>
        8
      </sui-statistic-value>
      <sui-statistic-label>
        Orange
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="yellow">
      <sui-statistic-value>
        28
      </sui-statistic-value>
      <sui-statistic-label>
        Yellow
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="olive">
      <sui-statistic-value>
        7
      </sui-statistic-value>
      <sui-statistic-label>
        Olive
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="green">
      <sui-statistic-value>
        14
      </sui-statistic-value>
      <sui-statistic-label>
        Green
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="teal">
      <sui-statistic-value>
        82
      </sui-statistic-value>
      <sui-statistic-label>
        Teal
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="blue">
      <sui-statistic-value>
        1
      </sui-statistic-value>
      <sui-statistic-label>
        Blue
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="violet">
      <sui-statistic-value>
        22
      </sui-statistic-value>
      <sui-statistic-label>
        Violet
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="purple">
      <sui-statistic-value>
        23
      </sui-statistic-value>
      <sui-statistic-label>
        Purple
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="pink">
      <sui-statistic-value>
        15
      </sui-statistic-value>
      <sui-statistic-label>
        Pink
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="brown">
      <sui-statistic-value>
        36
      </sui-statistic-value>
      <sui-statistic-label>
        Brown
      </sui-statistic-label>
    </sui-statistic>
    <sui-statistic in-group color="grey">
      <sui-statistic-value>
        49
      </sui-statistic-value>
      <sui-statistic-label>
        Grey
      </sui-statistic-label>
    </sui-statistic>
  </sui-statistics-group>
</template>

<script>
export default {
  name: 'StatisticColoredExample',
};
</script>
